
<template>
    <div class="icon-body">
        <el-popover placement="bottom" width="400" trigger="click" popper-class="iconSelect" v-model="visible">
            <div class="icon-list">
                <div style="width:100%;height:40px">
                    <label style="margin-right:5px;">图标库:</label>
                    <el-radio-group v-model="iconGroup" @change="iconGroupChange">
                        <el-radio :label="0">Awesome</el-radio>
                        <el-radio :label="1">Element</el-radio>
                        <!-- <el-radio :label="2">备选项</el-radio> -->
                    </el-radio-group>
                </div>
                <div v-for="(item, index) in icons" :key="index" @click.stop="selectedIcon(item)" class="icon-item">
                    <i :class="item.className"></i>
                    <span>{{item.name}}</span>
                </div>
            </div>
            <el-input slot="reference" v-model="name" style="position: relative;" clearable placeholder="请选择图标(可搜索)" @clear="filterIcons">
                <i slot="prefix" :class="showIcon"></i>
            </el-input>
        </el-popover>

    </div>
</template>

<script>
import AwesomeData from "./AwesomeData";
import ElementData from "./ElementData";
// import "./record";
export default {
    data() {
        return {
            iconGroup: 0,
            icons: [],
            name: "",
            showIcon: "el-icon-search",
            // 取消
            notBack: false,
            base: [],
            timer: null,
            visible: false,
        };
    },
    mounted() {
        this.iconGroupChange(0);
    },

    methods: {
        filterIcons() {
            let name = this.name;
            this.showIcon = "el-icon-search";
            this.emitValue(["", ""]);
            if (name) {
                let icons = this.base.slice(0, 10000);
                this.icons = icons.filter(
                    (icon) => icon.className.indexOf(name) != -1
                );
            } else {
                this.icons = this.base.slice(0, 10000);
            }
        },
        selectedIcon(item) {
            this.name = item.name;
            this.emitValue([item.className, item.name]);
            this.showIcon = item.className;
        },
        emitValue(value) {
            this.visible = false;
            this.$emit("changeIconClassName", value);
        },
        iconGroupChange(label) {
            if (label == 0) {
                this.base = JSON.parse(JSON.stringify(AwesomeData));
            } else if (label == 1) {
                this.base = JSON.parse(JSON.stringify(ElementData));
            }
            this.icons = this.base.slice(0, 10000);
        },
        iconReset() {
            this.name = "";
            this.showIcon = "el-icon-search";
            this.emitValue(["", ""]);
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.icon-body {
    width: 100%;
    position: relative;

    & >>> .el-input__prefix {
        color: #000;
        left: 10px;
    }
}
.icon-list {
    height: 200px;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    border-radius: 4px;
    // border: 1px solid #e6ebf5;
    padding: 12px;
    color: #606266;
    background-color: #fff;
    .icon-item {
        cursor: pointer;
        width: 33%;
        height: 40px;
    }
}
</style>
